<template>
    <div>
        <h2>人员列表</h2>
        <h3 style="color: red;">Count 组件求和为：{{count}}</h3>
        <h3>列表中第一个人的名字是：{{firstName}}</h3>
        <div>
            <input type="text" name="personName" v-model="xingming">
            <button @click="addPerson">添加</button>
            <button @click="addPersonXW">添加一个姓王的人</button>
            <button @click="addRandomPerson">添加一个人，名字随机</button>
        </div>
        <ul>
            <li v-for="(item,index) in list" ::key="item.id">{{item.name}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'Person',
    data() {
        return {
            xingming:''
        }
    },
    computed: {
        list(){
            return this.$store.state.personModule.personList
        },
        count(){
            return this.$store.state.countModule.count
        },
        firstName(){
            return this.$store.getters['personModule/firstName']
        }
    },
    methods: {
        addPerson(){
            this.$store.commit('personModule/ADDPERSON',this.xingming)
            this.xingming=''
        },
        addPersonXW(){
            this.$store.dispatch('personModule/addPersonXW',this.xingming)
        },
        addRandomPerson(){
            this.$store.dispatch('personModule/addRandomPerson')
        }
    },
    mounted() {
        console.log(this)
    },
}
</script>
<style>
    
</style>